<template>
  <div class="other-info">
    <flex-box center-v class="part-1">
      <flex-box center-v>
        <span>
          <image-box class="icon" :src="require('@/assets/icon/richu.png')" size="12" />
        </span>
        <span>日出</span>
        <span>05:45</span>
      </flex-box>
      <flex-box center-v class="sunset">
        <span><image-box class="icon" :src="require('@/assets/icon/riluo.png')" size="11" /></span>
        <span>日落</span>
        <span>18:56</span>
      </flex-box>
    </flex-box>

    <flex-box justify="space-between" class="part-2">
      <div v-for="(item, index) in list" :key="index">
        <div class="title">{{item.title}}</div>
        <div class="desc">{{item.desc}}</div>
      </div>
    </flex-box>
  </div>
</template>

<script>

import FlexBox from "@/components/flex-box/index";
import ImageBox from "@components/image-box";
export default {
  name: "OtherInfo",
  components: {ImageBox, FlexBox},
  data() {
    return {
      list: [
        {
          title: '2级',
          desc: '南风'
        },
        {
          title: '76%',
          desc: '湿度'
        },
        {
          title: '30°',
          desc: '体感'
        },
        {
          title: '1003hPa',
          desc: '气压'
        }
      ]
    }
  },
  methods: {},

  created() {

  },

  mounted() {

  }

}
</script>

<style lang="scss" scoped>
.other-info {
  font-size: 0.6rem;

  .part-1 {
    .icon {
      margin-right: 2px;
    }

    .sunset {
      margin-left: 30px;
    }
  }

  .part-2{
    margin-top: 14px;
    .title {
      font-size: 1.1rem;
    }

    .desc {
      font-size: 0.7rem;
      opacity: 0.7;
      text-align: left;
    }
  }
}
</style>
